<template>
<div class=''>
    <div id="app" align="center">
			<div class="foot">
				<ul>
					<li>
						<h1>车型档案</h1></li>
					<li>
                        
						<el-button size="mini" type="danger" @click="hh()" plain>添加品牌</el-button>
					</li>
					<el-dialog title="添加车型品牌" :visible.sync="dialogFormVisible">
						<el-form :model="form">
							<el-row :gutter="10">
								<el-col :span="12">
									<el-form-item label="项目编号" :label-width="formLabelWidth">
										<el-input v-model="form.vbrandno" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="项目名称" :label-width="formLabelWidth">
										<el-input v-model="form.vbrandname" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="addpp()">添 加</el-button>
						</div>
					</el-dialog>
					<li>
						<el-button size="mini" type="danger" @click="hh2()" plain>添加车型信息</el-button>
						<el-dialog title="添加车型品牌" :visible.sync="dialogFormVisible3">
							<el-form :model="form">
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="编号" :label-width="formLabelWidth">
											<el-input v-model="form3.vtypeno" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="车型名称" :label-width="formLabelWidth">
											<el-input v-model="form3.vtypename" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="12">
										<div class="block">
											<span class="demonstration">时间</span>
											<el-date-picker v-model="form3.vdate" type="date" placeholder="选择日期">
											</el-date-picker>
										</div>
									</el-col>
									<el-col :span="12">
										<el-form-item label="燃烧标志" :label-width="formLabelWidth">
											<el-input v-model="form3.fuelmark" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="发动机品牌" :label-width="formLabelWidth">
										<el-select v-model="value" placeholder="请选择">
											<el-option v-for="item in options" :key="item.enginetypeid" :label="item.enginetypename" :value="item.enginetypeid">
											</el-option>
										</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="推荐价格" :label-width="formLabelWidth">
											<el-input v-model="form3.vprice" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="续断器" :label-width="formLabelWidth">
											<el-input v-model="form3.vpower" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>

								</el-row>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisible = false">取 消</el-button>
								<el-button type="primary" @click="addgg()">添 加</el-button>
							</div>
						</el-dialog>
					</li>
				</ul>
			</div>
			<div class="left">.
				<el-row>
					<el-col :span="16">
						<el-input placeholder="根据编号和名称模糊查询" v-model="input" clearable>
						</el-input>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" @click="Mselect()" icon="el-icon-search">搜索</el-button>
					</el-col>
				</el-row>
				<template>
					<el-table :data="tableData" border style="width: 200%">
						<el-table-column prop="vbrandno" label="编号" width="75">
						</el-table-column>
						<el-table-column prop="vbrandname" label="品牌名称" width="120">
						</el-table-column>
						<el-table-column label="操作" width="100">
							<template slot-scope="scope">
								<el-button @click="handleClick(scope.row.vbrandid)" type="text" size="small">编辑</el-button>
								<el-dialog title="修改车型品牌" :visible.sync="dialogFormVisible2">
									<el-form :model="form2">
										<el-row :gutter="10">
											<el-col :span="12">
												<el-form-item label="品牌编号" :label-width="formLabelWidth">
													<el-input v-model="form2.vbrandno" autocomplete="off"></el-input>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="品牌名称" :label-width="formLabelWidth">
													<el-input v-model="form2.vbrandname" autocomplete="off"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
									</el-form>
									<div slot="footer" class="dialog-footer">
										<el-button @click="ss()">取 消</el-button>
										<el-button type="primary" @click="xiugai()">确认 修改</el-button>
									</div>
								</el-dialog>
								<el-button @click="handleDelete(scope.row.vbrandid)" type="text" size="small">删除-</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<div class="right">
				<el-dialog title="修改车型品牌" :visible.sync="dialogFormVisible4">
							<el-form :model="form">
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="编号" :label-width="formLabelWidth">
											<el-input v-model="form3.vtypeno" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="车型名称" :label-width="formLabelWidth">
											<el-input v-model="form3.vtypename" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="12">
										<div class="block">
											<span class="demonstration">时间</span>
											<el-date-picker v-model="form3.vdate" type="date" placeholder="选择日期">
											</el-date-picker>
										</div>
									</el-col>
									<el-col :span="12">
										<el-form-item label="燃烧标志" :label-width="formLabelWidth">
											<el-input v-model="form3.fuelmark" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="发动机品牌" :label-width="formLabelWidth">
										<el-select v-model="value" placeholder="请选择">
											<el-option v-for="item in options" :key="item.enginetypeid" :label="item.enginetypename" :value="item.enginetypeid">
											</el-option>
										</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="推荐价格" :label-width="formLabelWidth">
											<el-input v-model="form3.vprice" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="续断器" :label-width="formLabelWidth">
											<el-input v-model="form3.vpower" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>

								</el-row>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="qx()">取 消</el-button>
								<el-button type="primary" @click="xiugai2()">修改</el-button>
							</div>
						</el-dialog>
				<el-row>
					<el-col :span="16">
						<el-input placeholder="根据编号和名称模糊查询" v-model="input2" clearable>
						</el-input>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" @click="Mselect2()" icon="el-icon-search">搜索</el-button>
					</el-col>
				</el-row>
				<template>
					<el-table :data="tableData2.list" border style="width: 100%">
						<el-table-column fixed prop="vtypeno" label="编号" width="150">
						</el-table-column>
						<el-table-column prop="vtypename" label="车型名称" width="120">
						</el-table-column>
						<el-table-column prop="vpower" label="续断器" width="120">
						</el-table-column>
						<el-table-column prop="vdate" label="车型时间" width="120">
						</el-table-column>
						<el-table-column prop="fuelmark" label="燃烧标志" width="120">
						</el-table-column>
						<el-table-column prop="enginetypename" label="发动机品牌" width="120">
						</el-table-column>
						<el-table-column prop="vprice" label="推荐价格" width="120">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="130">
							<template slot-scope="scope">
								<el-button @click="handleEdit(scope.row.vtypeid)" type="text" size="small">修改</el-button>
						
								<el-button @click="sc(scope.row.vtypeid)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.pageNum" :page-sizes="[3, 4, 5]" :page-size="tableData2.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData2.total">
					</el-pagination>
				</div>
			</div>
		</div>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
options: [{}],
       			 value: '',
				form: {
					vbrandid: '',
					vbrandname: "",
					vbrandno: "",
				},
				form2: [{}],
				form3: {
					enginetypeid: '',
					fuelmark: "",
					vdate: "",
					vpower: "",
					vprice: "",
					vtypename: "",
					vtypeno: "",
				},
				input: '',
				input2: '',
				kong: null,
				dialogFormVisible: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				dialogFormVisible4: false,
				formLabelWidth: '90px',
				tableData: [],
				tableData2: []
};
},
//计算属性
computed: {},
//方法集合
methods: {
qx(){
				this.dialogFormVisible4=false;
				},
				xiugai2(){
					let _this = this;
					if(isNaN(this.value)){
						this.$http.put(`http://127.0.0.1:8080/api/cx/update3/${this.form3.vtypeid}`, this.form3).then(function(resp) {
							if (resp.data.code == "200") {
								alert("修改品牌成功！");
								_this.dialogFormVisible4=false;
								_this.show2(1, 4);
							}
						});
					}else{
						_this.form3.enginetypeid=_this.value;
						this.$http.put(`http://127.0.0.1:8080/api/cx/update3/${this.form3.vtypeid}`, this.form3).then(function(resp) {
							if (resp.data.code == "200") {
								alert("修改品牌成功！");
								_this.dialogFormVisible4=false;
								_this.show2(1, 4);
							}
						});
					}
					
						
				},
				handleEdit(id){
					this.dialogFormVisible4=true;
						this.$http.get(`http://localhost:8080/api/cx/showone2/${id}`).then(resp => {
							let rsdata = resp.data;
							this.form3 = rsdata;
							this.value=this.form3.enginetypename;
							
						});
				},
				cha() {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/pp/1/100000`).then(resp => {
							let rsdata = resp.data.list;
							_this.options = rsdata;
							console.info(_this.options);
						});
					},
				addgg() {
						if (this.value == ''||this.form3.fuelmark == '' || this.form3.vdate == '' || this.form3.vpower == '' || this.form3.vprice == '' || this.form3.vtypename == '' || this.form3.vtypeno == '') {
							alert("请填写完整信息")
							return ''
						}
						this.form3.enginetypeid = this.value;
						this.$http.post('http://127.0.0.1:8080/api/cx/add2', this.form3).then(resp => {
							if (resp.data.code == "200") {
								this.show2(1, 4);
								alert("新增成功！")
								this.dialogFormVisible3 = false;
							}
						});
					},
					hh2() {
						
						
						this.dialogFormVisible3 = true;
						this.value='',
						this.form3 = {
							enginetypeid: '',
							
							fuelmark: "",
							vdate: "",
							vpower: "",
							vprice: "",
							vtypename: "",
							vtypeno: "",
						};
					},
					Mselect2() {
						if (this.input2 == '') {
							this.$http.get(`http://localhost:8080/api/cx/show3/1/3/null`).then(resp => {
								let rsdata = resp.data;
								//console.info(rsdata);
								this.tableData2 = rsdata;
							});
						} else {
							this.$http.get(`http://localhost:8080/api/cx/show3/1/3/${this.input2}`).then(resp => {
								let rsdata = resp.data;
								//console.info(rsdata);
								this.tableData2 = rsdata;
							});
						}
					},
					sc(id) {
						let _this = this;
						if (window.confirm('是否删除该信息?')) {
							this.$http.delete(`http://127.0.0.1:8080/api/cx/delpp2/${id}`).then(resp => {
								if (resp.data.code == "200") {
									alert('删除成功');
									_this.show2(1, 3);
								}
							});
						}
					},
					handleSizeChange(val) {
						this.show2(this.tableData2.pageNum, val);
					},
					handleCurrentChange(val) {
						console.log(`当前页: ${val}`);
						this.show2(val, this.tableData2.pageSize);
					},
					ss() {
						this.dialogFormVisible2 = false;
					},
					handleDelete(index) {
						let _this = this;
						if (window.confirm('是否删除该类型?')) {
							this.$http.delete(`http://127.0.0.1:8080/api/cx/delpp/${index}`).then(resp => {
								if (resp.data.code == "200") {
									alert('删除成功');
									this.show();
								}
							});
						}
					},
					handleClick(row) {
						this.dialogFormVisible2 = true;
						this.$http.get(`http://localhost:8080/api/cx/showone/${row}`).then(resp => {
							let rsdata = resp.data;
							this.form2 = rsdata;
						});
					},
					hh() {
						this.dialogFormVisible = true;
						this.form = {
							vbrandname: "",
							vbrandno: "",
						};
					},
					addpp() {
						if (this.form.vbrandno == '' || this.form.vbrandname == '') {
							alert("请填写完整信息");
							return "";
						}
						this.$http.post('http://127.0.0.1:8080/api/cx/add', this.form).then(resp => {
							if (resp.data.code == "200") {
								this.show();
								alert("新增成功！")
							}
						});
						this.dialogFormVisible = false;
					},
					xiugai() {
						let _this = this;
						_this.$http.put(`http://127.0.0.1:8080/api/cx/update2/${this.form2.vbrandid}`, this.form2).then(function(resp) {
							if (resp.data.code == "200") {
								alert("修改品牌成功！")
								_this.ss();
								_this.show();
							}
						});
					},
					Mselect() {
						let _this=this;
						if (isNaN(_this.input)) {
							_this.$http.get(`http://localhost:8080/api/cx/show2/null/${this.input}`).then(resp => {
								let rsdata = resp.data;
								_this.tableData = rsdata;
							});
						} else if (_this.input == '') {
							_this.$http.get(`http://localhost:8080/api/cx/show2/null/null`).then(resp => {
								let rsdata = resp.data;
								_this.tableData = rsdata;
							});
						} else {
							_this.$http.get(`http://localhost:8080/api/cx/show2/${this.input}/null`).then(resp => {
								let rsdata = resp.data;
								_this.tableData = rsdata;
							});
						}
					},
					show() {
						let _this=this;
						_this.$http.get(`http://localhost:8080/api/cx/show2/null/null`).then(resp => {
							let rsdata = resp.data;
							_this.tableData = rsdata;
						});
					},
					show2(p, s) {
						let _this=this;
						_this.$http.get(`http://localhost:8080/api/cx/show3/${p}/${s}/null`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.tableData2 = rsdata;
						});
					},
},
//挂载完成（可以访问DOM元素）
mounted() {
this.cha();
				this.show();
				this.show2(1, 4);
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
#app {
			margin: auto;
			margin-top: 30px;
			width: 1316px;
		}
		
		.left {
			float: left;
			width: 330px;
			height: 600px;
			
		}
		
		.right {
			float: right;
			width: 900px;
			height: 600px;
			
		}
		
		ul li {
			display: inline-block;
		}
</style>